<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymleaf应用解析二</title>
</head>
<body>
<h2>2.thymeleaf的迭代语句,类似增强型for</h2>
<!--参数：u对象，stat集合状态对象(拿到集合大小size，索引号index，当前元素current，计数count)-->
<div th:each="u,stat:${users}">
    <p><span th:text="${stat.index}"></span>&ensp;<span th:text="${u.uid}"></span>&ensp;<span
            th:text="${u.name}"></span></p>
</div>
<!--再次遍历users-->
<table>
    <tr>
        <th>索引</th>
        <th>计数</th>
        <th>工号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <!--参数：user对象，${users}集合对象,有一个隐含的状态变量userStat,在对象后边加上一个Stat-->
    <tr th:each="user:${users}">
        <td th:text="${userStat.index}"></td>
        <td th:text="${userStat.count}"></td>
        <td th:text="${user.uid}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.gendar}"></td>
    </tr>
</table>
<h2>3.thymeleaf的条件判断</h2>
<!--条件判断可以动态修改网页的样式与结构,此处可以判断不存在一个对象-->
<div class="mydv" th:if="${msg!=null}">
    <p style="color:red;font-size: 24px">三分春色，二分流水，一分尘土</p>
</div>
<div class="mydv" th:if="${msg==null}">
    <p style="color:green;font-size: 24px">七八个星天外，两三点雨山前</p>
</div>
<h2>4.thymeleaf之javascript操作</h2>
<input class="btn" id="btn" type="button" value="点我"/>
<div class="content" id="content">beautiful</div>
<style>
    .btn {
        width: 120px;
        height: 40px;
        background: red;
        /*去内外边框*/
        border: none;
        outline: medium;
        color: white;
        border-radius: 50%;
        /*手形外观*/
        cursor: pointer;
    }

    .content {
        font-size: 26px;
        color: blue;
        height: 40px;
    }
</style>
<h2>5.thymeleaf的常用符号的应用</h2>
<!--${1}表达式输出用于标签上,[[2]]表达式输出用于标签之间或js代码中,@{/img}相对路径串接href/src-->
<!--*{1}与#{2}用法-->
<h3>5.1 *大括号的用法,要在父元素中获取父元素中对象的属性值</h3>
<p th:object="${us}">
  <span th:text="*{name}"></span>&ensp;<span th:text="*{gendar}"></span>
</p>
<h3>5.2 #大括号的用法,获取国际化全局属性配置文件中的属性值</h3>
<p th:text="#{myinfo}"></p>
</body>
<!--th:inline指的是可以在js中获取后台传递的数据,更方便前端加载数据-->
<script th:inline="javascript">
    var btn = document.getElementById("btn");
    var content = document.getElementById("content");
    btn.onclick = function () {
        var us = [[${us}]];
        var info = "工号：" + us.uid +" 姓名："+us.name+" 性别：" + us.gendar;
        //innerText,innerHTML
        content.innerHTML = info;
    }
</script>
</html>